<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>说说列表</span>
                <el-button class="button" type="danger" size="small"><el-icon>
                        <Plus />
                    </el-icon>
                    <router-link to="/shuoshuo/addshuoshuo">
                        发布说说
                    </router-link>
                </el-button>
            </div>
        </template>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handlechangepage">

            <el-tab-pane label="公开" name="first">
                <ul class="infinite-list" style="overflow: auto" ref="lisst">
                    <el-card class="w-80 my-2 shadow-xl" v-for="item in list" :key="item.id">
                        <template #header>
                            <div class="card-header">
                                <span>
                                    {{ item.shuoshuo_author }}
                                    <span v-if="item.shuoshuo_istop"><el-icon>
                                            <StarFilled />
                                        </el-icon></span>
                                </span>

                                <el-dropdown trigger="click">
                                    <span class="el-dropdown-link" ><el-icon
                                            class="el-icon--right"><arrow-down /></el-icon></span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="editshuoshuo(item)">编辑</el-dropdown-item>
                                            <el-dropdown-item @click="totopshuoshuo(item)">{{ item.shuoshuo_istop ? "取消置顶" : "置顶" }} </el-dropdown-item>
                                            <el-dropdown-item @click="invisible(item)">不可见</el-dropdown-item>
                                            <el-dropdown-item @click="deleteshuoshuo(item)">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </template>
                        <div class="flex">
                            <el-avatar shape="square" size="" :src="item.avater" />
                            <div class="text-xs text-sm max-w-[80%] ml-1.5">
                                {{ item.shuoshuo_content }}
                            </div>

                        </div>
                        <div class="mt-2 max-w-[95%] flex min-h-[30%] flex-wrap">
                            <el-image style="width: 80px; height: 80px ;margin:3px ;"
                                v-for="(img, index) in item.shuoshuoimgs_name" :key="index" :src="img.shuoshuo_url"
                                fit="cover" />

                        </div>
                        <div class="text-xs mt-1 text-slate-400">{{ item.time }}</div>
                    </el-card>
                    <div class="observer text-xs text-slate-400 pl-10 border-box">
                        {{ isends ? "暂无更多" : "下拉加载更多" }}
                    </div>
                </ul>
            </el-tab-pane>

            <el-tab-pane label="不可见" name="second">
                <ul class="infinite-list" style="overflow: auto" ref="lisst">
                    <el-card class="w-80 my-2 shadow-xl" v-for="item in list" :key="item.id">
                        <template #header>
                            <div class="card-header">
                                <span>
                                    {{ item.shuoshuo_author }}
                                    <span v-if="item.shuoshuo_istop"><el-icon>
                                            <StarFilled />
                                        </el-icon></span>
                                </span>
 
                                <el-dropdown trigger="click">
                                    <span class="el-dropdown-link"><el-icon
                                            class="el-icon--right"><arrow-down /></el-icon></span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="editshuoshuo(item)">编辑</el-dropdown-item>
                                            <el-dropdown-item @click="invisible(item)">公开</el-dropdown-item>
                                            <el-dropdown-item @click="deleteshuoshuo(item)">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>

                        </template>
                        <div class="flex">
                            <el-avatar shape="square" size="" :src="item.avater" />
                            <div class="text-xs text-sm max-w-[80%] ml-1.5">
                                {{ item.shuoshuo_content }}
                            </div>

                        </div>
                        <div class="mt-2 max-w-[95%] flex min-h-[30%] flex-wrap">
                            <el-image style="width: 80px; height: 80px ;margin:3px ;"
                                v-for="(img, index) in item.shuoshuoimgs_name" :key="index" :src="img.shuoshuo_url"
                                fit="cover" />

                        </div>
                        <div class="text-xs mt-1 text-slate-400">{{ item.time }}</div>
                    </el-card>
                    <div class="observer1 text-xs text-slate-400 pl-10 border-box">
                        {{ isend ? "暂无更多" : "下拉加载更多" }}
                    </div>
                </ul>
            </el-tab-pane>

        </el-tabs>
    </el-card>
</template>

<script setup>
import { ref, onMounted ,inject} from 'vue'
import {
    ArrowDown,
    StarFilled,
    Plus,
} from '@element-plus/icons-vue'
import { getshuoshuo, gettopshuoshuo ,totop,tovisible,todelete } from "@/api/shuoshuo.js"
import {useRouter} from "vue-router" 
const router = useRouter()
let reload = inject('reload')
const activeName = ref('first')
const page = ref(1)
const pageSize = ref(4)
/* 说说列表的数据结构 */
const list = ref([]);
let box ;
let observers;/* 表示是否结束 */
let isends = ref(false);/* 表示是否结束 */
let isend  = ref(false);/* 表示是否结束 */
/* 切换页面 */
const handlechangepage = async (tab) => {
    activeName.value = tab
    page.value = 1
    pageSize.value = 4
    observers.unobserve(box)
    list.value=[]
    if (activeName.value == "first") {
        await gettop()
        await load(1, 3, 1)
        observe1("observer",1,true)
    }else{
        await load(1, 4, 2)
        observe1("observer1",2,false)
    }
}
/* 加载数据 */
const load = async (page, pageSize, shuoshuo_status) => {
    let res = await getshuoshuo({ page, pageSize, shuoshuo_status })
    if (res.data.status == 200) {
        let newdata = res.data.data.map(item => {
            let fleg = true;
            let { createdAt, ...temp } = item
            let date = Math.floor((new Date() - new Date(createdAt)) / (86400 * 1000));
            if (date < 1) {
                fleg = false;
                date = Math.floor((new Date() - new Date(createdAt)) / (3600 * 1000));
            }
            return {
                ...temp,
                time: fleg ? date + "天前" : date + "小时前",
            }
        })
        let val1 = newdata.filter(item => item.shuoshuo_istop)
        let val2 = newdata.filter(item => !item.shuoshuo_istop)
        list.value = list.value.concat(val1.concat(val2));
    } else {
        if(activeName.value=="first"){
            isends.value = true;
        }else{
            isend.value = true
        }
        ElMessage({
            message: res.data.message,
            type: 'warning',
        })
    }
}
/* 显示与隐藏说说 */
async function invisible(data){
    let invisible ;
    if(data.shuoshuo_status==2){
        invisible = false
    }else{
        invisible = true
    }
    let shuoshuo_id = data.id
    let res = await tovisible({shuoshuo_id,invisible})
    if(res.data.status==200){
        ElMessage({
            message: res.data.message,
            type: 'success',
        })
    }else{
        ElMessage({
            message: res.data.message,
            type: 'warning',
        })
    }
    reload()
} 
/* 获取第一个置顶的 */
async function gettop() {
    let item = await gettopshuoshuo()
   if(item.data.status==200){
    let fleg = true;
    let { createdAt, ...temp } = item.data.data
    let date = Math.floor((new Date() - new Date(createdAt)) / (86400 * 1000));
    if (date < 1) {
        fleg = false;
        date = Math.floor((new Date() - new Date(createdAt)) / (3600 * 1000));
    }
    list.value.push({
        ...temp,
        time: fleg ? date + "天前" : date + "小时前",
    })
    return true
   }else{
        return false
   }
}
/* 置顶说说 */
async function totopshuoshuo(data){
    let istotop ;
    if(data.shuoshuo_istop){
        istotop = false
    }else{
        istotop = true
    }
    let shuoshuo_id = data.id
    let res = await totop({shuoshuo_id,istotop})
    if(res.data.status==200){
        ElMessage({
            message: res.data.message,
            type: 'success',
        })
    }
    reload()
}
/* 监视 */
function observe1(observer,status,fleg){
    box=document.querySelector(`.${observer}`)
    observers=new IntersectionObserver(async (entries) => {
        if (entries[0].intersectionRatio > 0) {
            setTimeout(async () => {
                await load(++page.value, ++pageSize.value, status)
                if (fleg) {
                    if(isends.value){
                        observers.unobserve(box)
                    }
                }else{
                    if(isend.value){
                        observers.unobserve(box)
                    }
                }
            }, 400)
        }
    })
    observers.observe(box)
}
/* 编辑说说 */
function editshuoshuo(data){
    router.push({path:'/shuoshuo/editshuoshuo',query:{id:data.id}})
}
/* 删除说说 */
async function deleteshuoshuo(data){
    console.log(data);
    let shuoshuo_id = data.id
    let res =await todelete({shuoshuo_id})
    if(res.data.status==200){
        ElMessage({
            message: res.data.message,
            type: 'success',
        })
        
    }else{
        ElMessage({
            message: res.data.message,
            type: 'warning',
        })
    }
    reload()
}
onMounted(async () => {
    let status=await gettop()
    if(status){
        await load(1, 3, 1)
    }else{
        await load(1, 4, 1)
    }
    observe1("observer",1,true)
})
</script>

<style lang="css" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep(.el-card__header) {
    padding: 5px 25px !important;
}

.infinite-list {
    background-image: linear-gradient(90deg, rgba(196, 198, 198, .15) 10%, transparent 0), linear-gradient(hsla(0, 0%, 80.4%, .15) 10%, transparent 0);
    background-size: 10px 10px;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid hsla(0, 0%, 91%, .15);

    height: 450px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;

}
</style>